<div class="content">
    <div id="example_title">
        <h1>Events</h1>
        Last event is shown in the preview. Log of events is available in the console.
    </div>
    <div id="example_view"></div>
    <div id="example_code"></div>
</div>

<!--CODE-->
<div style="margin-left: 870px; position: absolute">
    <b style="color: gray; padding-bottom: 4px; display: inline-block;">&nbsp;Events Log</b>
    <div style="height: 5px"></div>
    <div id="preview" style="height: 320px; width: 300px; overflow-y: auto; border: 1px solid #e2e2e2; border-radius: 4px; padding: 5px; padding-bottom: 15px;"></div>

    <div style="height: 10px"></div>
    <button class="w2ui-btn action" action="clearLog">Clear Log</button>
</div>

<div id="grid" style="width: 850px; height: 350px;"></div>
<div style="height: 15px"></div>

<button class="w2ui-btn action" action="unmount">Unmount</button>
<button class="w2ui-btn action" action="render">Render</button>
<button class="w2ui-btn action" action="refresh">Refresh</button>
<button class="w2ui-btn action" action="destroy">Destroy</button>
<div style="height: 15px"></div>

<!--CODE-->
<script type="module">
import { w2grid, w2utils, query } from '__W2UI_PATH__'

let grid = new w2grid({
    name: 'grid',
    header: 'List of Names',
    url: 'data/list.json',
    show: {
        header: true,
        toolbar: true,
        footer: true,
        lineNumbers: true,
        selectColumn: true,
        expandColumn: true
    },
    columns: [
        { field: 'fname', text: 'First Name', size: '150px', info: true },
        { field: 'lname', text: 'Last Name', size: '150px' },
        { field: 'email', text: 'Email', size: '200px' },
        { field: 'sdate', text: 'Start Date', size: '200px' }
    ],
    searches: [
        { type: 'int',  field: 'recid', label: 'ID' },
        { type: 'text', field: 'fname', label: 'First Name' },
        { type: 'text', field: 'lname', label: 'Last Name' },
        { type: 'date', field: 'sdate', label: 'Start Date' }
    ],
    onExpand(event) {
        query('#'+event.box_id).html('<div style="padding: 10px; height: 100px">Expanded content</div>');
    }
})
// attach event listener for all events
grid.on('*', (event) => {
    console.log(event)
    let txt = event.detail.recid ?? event.detail.clicked?.recid
    if (txt) {
        txt = 'rec: ' + txt
    } else {
        txt = event.target
    }
    query('#preview').append(`<div>
        <span style="width: 100px; display: inline-block">${txt}</span>
        ${event.type}
    </div>`)
    query('#preview').prop('scrollTop', 100_000)
})

grid.render(query('#grid')[0])

query('#example_view .action').on('click', event => {
    let action = query(event.target).attr('action')
    switch (action) {
        case 'clearLog': {
            query('#preview').html('')
            break
        }
        case 'render': {
            grid.render(query('#grid')[0])
            break
        }
        case 'destroy': {
            grid.destroy()
            break
        }
        case 'refresh': {
            grid.refresh()
            break
        }
        case 'unmount': {
            grid.unmount()
            break
        }
    }
})
</script>
